<template>
    <div id="realtimeAlarm">
      <!-- <el-header></el-header> -->
  
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <div class="title">
            <div class="name">设备编号:{{ item.tagName }}</div>
            <div class="time">回风温度:23 ℃</div>
          </div>
          
          <p class="pos">设备位置: {{ item.tagName }}</p>
          <p class="pos">采集时间: {{ timeTranslate(item.alarmTime) }}</p>
        </li>
      </ul>
    </div>
  </template>
  <script scoped>
  // import { realtimeAlarm } from '@/http/api'
  export default {
    data() {
      return {
        list: [
          {
            tagName: "紧急报警#tag1",
            pos: "",
            alarmLevel: "",
            alarmType: "紧急报警",
            alarmDesc: "",
            alarmStatus: "报警",
            gisName: "",
            cameraName: "",
            alarmTime: "2023-08-04T10:33:19.3016469+08:00",
            solvePerson: "",
            solveTime: "1970-01-01T00:00:00",
            recoverTime: "1970-01-01T00:00:00",
            solveRes: "",
            ack: false,
            alarmValue: "True",
          },
          {
            tagName: "紧急报警#tag1",
            pos: "",
            alarmLevel: "",
            alarmType: "紧急报警",
            alarmDesc: "",
            alarmStatus: "报警",
            gisName: "",
            cameraName: "",
            alarmTime: "2023-08-04T10:33:19.3016469+08:00",
            solvePerson: "",
            solveTime: "1970-01-01T00:00:00",
            recoverTime: "1970-01-01T00:00:00",
            solveRes: "",
            ack: false,
            alarmValue: "True",
          },
          {
            tagName: "紧急报警#tag1",
            pos: "",
            alarmLevel: "",
            alarmType: "紧急报警",
            alarmDesc: "",
            alarmStatus: "报警",
            gisName: "",
            cameraName: "",
            alarmTime: "2023-08-04T10:33:19.3016469+08:00",
            solvePerson: "",
            solveTime: "1970-01-01T00:00:00",
            recoverTime: "1970-01-01T00:00:00",
            solveRes: "",
            ack: false,
            alarmValue: "True",
          },
        ],
      };
    },
    methods: {
      getDoorAlarm() {
          setInterval(() => {
              realtimeAlarm().then(res => {
                  // console.log(res);
                  this.list = res.data.slice(0, 3);
                  // this.list = this.list.slice(0, 3);
              }).catch(err => {
                  console.log(err);
              })
          }, 1000)
  
      },
      // 转换时间格式
      timeTranslate(val) {
        // 格式化时间2022-07-05T09:57:39.000Z 成 2018-08-07 00:00:00
        return this.dayjs(val).format("YYYY-MM-DD HH:mm:ss");
      },
  
      // 自适应
      winSize() {
        var ratioY = window.innerHeight / 880;
        var ratioX = window.innerWidth / 370;
  
        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
        // this.getDoorAlarm();
      },
    },
    mounted() {
      this.winSize();
      window.onresize = () => {
        return (() => {
          var ratioX = window.innerWidth / 370;
          var ratioY = window.innerHeight / 880;
  
          window.document.body.style.transform = "scale(" + ratioY + ")";
          window.document.body.style.transformOrigin = "0px 0px";
        })();
      };
    },
    watch: {},
    computed: {},
    filters: {},
    components: {},
  };
  </script>
  <style scoped lang="less">
  #realtimeAlarm {
    width: 1296px;
    width: 990px;
    height: 880px;
    padding: 40px 30px;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  li {
    padding: 20px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  
  .title {
    display: flex;
    justify-content: space-between;
    font-size: 32px;
    font-weight: bold;
  }
  
  p {
    margin: 20px 0px 0;
  
    font-size: 32px;
    font-weight: bold;
  }
  </style>
  